<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="d1" style="width: 50%;float: left;"></div>
    <div id="d2" style="width: 50%;float: left;"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script>
        console.time();
        var d1 = $("#d1");
        // var html = [];
        var str = "";
        for (let i = 0; i < 100000; i++) {
            // html.push("<div style='color:red;'>aaaaa</div>");
            str+="<div style='color:red;'>aaaaa</div>";
        }
        // d1.append(html.join(' '));
        d1.append(str);
        console.timeEnd();
        console.time();
        var d2 = document.querySelector("#d2");
        var tmp = document.createDocumentFragment();
        for (let i = 0; i < 100000; i++) {
            var a = document.createElement('div');
            a.style.color='blue';
            a.innerText='aaaaa';
            tmp.appendChild(a);
        }
        d2.appendChild(tmp);
        console.timeEnd();
    </script>
</body>
</html>